<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 780px;
				height: 800px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="竞争对手">
					<el-col :offset="20">
						<el-button>保存</el-button>
					</el-col>
				</el-form-item>
				<el-form-item label="公司名称">
					<el-col :span="22">
						<el-input v-model="form.company"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="客户" prop="custname">
					<el-col :span="22">
						<el-input v-model="form.custname" disabled></el-input>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-autocomplete class="inline-input" v-model="form.custname" :fetch-suggestions="querySearch" placeholder="编号,关键字" @select="handleSelect"></el-autocomplete>
					<el-button icon="el-icon-search"></el-button>
				</el-form-item>
				<el-form-item label="对应机会">
					<el-col :span="10">
						<el-form-item prop="opp">
							<template>
								<el-select v-model="form.opp" placeholder="请选择">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-form-item>
					</el-col>
					<el-col :span="9">
						<el-form-item label="竞争能力" prop="nengli">
							<template>
								<el-select v-model="form.nengli" clearable placeholder="请选择">
									<el-option v-for="item in form.options" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-form-item>
					</el-col>
				</el-form-item>

				<el-form-item label="竞争产品">
					<el-col :span="22">
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :rows="4" placeholder="请输入内容" v-model="form.other">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="优势">
					<el-col :span="22">
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :rows="4" placeholder="请输入内容" v-model="form.youshi">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="劣势">
					<el-col :span="22">
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :rows="4" placeholder="请输入内容" v-model="form.leishi">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="应对策略">
					<el-col :span="22">
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :rows="4" placeholder="请输入内容" v-model="form.celuv">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="备注">
					<el-col :span="22">
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :rows="4" placeholder="请输入内容" v-model="form.more">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-col>
						<el-button type="info" plain>上传附件</el-button>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
					<el-button @click="resetForm('form')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						form: {
							company: '',
							custname: '',
							opp: '',
							nengli: '',
							other: '',
							youshi: '',
							leishi: '',
							celuv: '',
							more: '',
							options: [{
								value: '选项1',
								label: '黄金糕'
							}, {
								value: '选项2',
								label: '双皮奶'
							}, {
								value: '选项3',
								label: '蚵仔煎'
							}, {
								value: '选项4',
								label: '龙须面'
							}, {
								value: '选项5',
								label: '北京烤鸭'
							}],
							
						},
						//验证规则
						rules: { //数据源model
							custname: [{
								required: true,
								message: '请选择客户人',
								trigger: 'blur'
							}],

							opp: [
								//数据类型要是date
								{
									type: 'date',
									required: true,
									message: '请选择日期',
									trigger: 'change'
								}
							],
							degree: [
								//数据类型要是date
								{
									type: 'date',
									required: true,
									message: '请选择程度',
									trigger: 'change'
								}
							],
							nengli: [
								//数据类型要是date
								{
									type: 'date',
									required: true,
									message: '请选择程度',
									trigger: 'change'
								}
							]
						}
					}
				},
				methods: {
					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/form",
									//参数转换
									Qs.stringify(this.ruleForm, {
										arrayFormat: 'brackets'
									})
									//	params:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
								}).catch(function() {
									alert("出错了");
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					querySearch: function(queryString, cb) {
						var allarr = [{
								"value": "班花"
							},
							{
								"value": "吴佳亮"
							},
							{
								"value": "汤圆"
							}
						];
						var result = [];
						//遍历所有的选项
						allarr.forEach(v => {
							//如果文本框中的值和选项相符,则返回该选项
							if(v.value.indexOf(queryString) >= 0) {
								result.push(v);
							}
						})
						//将结果传递给回调函数,显示在最终的建议列表处
						cb(result);
					}

				}
			});
		</script>
	</body>

</html>